<template>
	<view class="content">
		<view class="search">
			<u-search placeholder="搜索商品" v-model="keyword" :focus='true' :show-action='false' />
		</view>

		<view class="swiper">
			<u-swiper height='330' :effect3d='true' :list="list" />
		</view>

		<view class="notice">
			<u-notice-bar mode="horizontal" :list="notice"></u-notice-bar>
		</view>

		<view class="tabs">
			<u-tabs 
			:list="lists" 
			:is-scroll="false" 
		
			bar-width='80' item-width="160"
			:current="current"
			 @change="change"></u-tabs>
		</view>
		
		
		<view class="wrap u-skeleton">
			<u-row gutter="16">
				<!-- 必须循环为对象 防止组件内部报错 -->
				<u-col span="6" v-for="(item,index) in goods.length !==0 ? goods : [{},{},{},{}]" :key='index'>
				<!-- 商品列表 -->
				 <goods-card :item='item'/>
				</u-col>
		
			</u-row>
		</view>
		<!--引用组件 骨架屏-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				//轮播图片
				list: [
					'https://img1.baidu.com/it/u=2128198512,1967583574&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=3692647261,401841183&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=1830509290,2347906732&fm=26&fmt=auto&gp=0.jpg'
				],
				//消息通知栏
				notice: ['请注意交易安全，谨慎辨别虚假信息'],


				//tabs标签栏
				lists: [{
					name: '最新发布'
				}, {
					name: '闲置出售'
				}, {
					name: '意向求购',

				}],

				current: 0,
				goods: [],
				//是否显示骨架屏
				loading: false
			}
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.search {
		height: 90rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.swiper {
		margin-top: 30rpx;
	}

	.notice {
		margin-top: 15rpx;
	}
</style>
